<template>
    <div>
        <div class="main-features">
            <ul>
                <li v-for="(item,index) in data.nav" :key="index" :style="'color:'+data.font_color">

                    <a href="../../pages/allGoods/main" v-if="item.poster_name=='全部商品'">
                        <img :src="item.image" />
                        <span :style="'color:'+data.font_color">{{item.poster_name}}</span>
                    </a>
                    <a href="../../pages/getGoodsByCid/main" v-else-if="item.poster_name=='分类'">
                        <img :src="item.image" />
                        <span :style="'color:'+data.font_color">{{item.poster_name}}</span>
                    </a>
                    <a href="" v-else-if="item.poster_name=='购物车'" @click="toTabbar('../../pages/shopChart/main')">
                        <img :src="item.image" />
                        <span :style="'color:'+data.font_color">{{item.poster_name}}</span>
                    </a>
                    <a href="../../pages/orderList/main?active=0" v-else-if="item.poster_name=='订单'">
                        <img :src="item.image" />
                        <span :style="'color:'+data.font_color">{{item.poster_name}}</span>
                    </a>
                    <span v-else>
                        <a href="" @click="towebView(item.link)" v-if="item.link">
                            <img :src="item.image" />
                            <span :style="'color:'+data.font_color">{{item.poster_name}}</span>
                        </a>
                        <a href="" v-else @click="toast">
                             <img :src="item.image" />
                            <span :style="'color:'+data.font_color">{{item.poster_name}}</span>
                        </a>

                    </span>
                    <!-- <router-link to="/shopChart" v-if="item.poster_name=='购物车'">
                        <img :src="item.image" />
                        <span :style="'color:'+data.font_color">{{item.poster_name}}</span>
                    </router-link> -->
                    <!-- <div>
                        <router-link to="/shopChart" v-if="item.poster_name=='购物车'">
                            <img :src="item.image" />
                            <span :style="'color:'+data.font_color">{{item.poster_name}}</span>
                        </router-link>
                        <router-link to="/myOrder?active=0" v-else-if="item.poster_name=='订单'">
                            <img :src="item.image" />
                            <span :style="'color:'+data.font_color">{{item.poster_name}}</span>
                        </router-link>
                        <router-link to="/club" v-else-if="item.poster_name=='社区'">
                            <img :src="item.image" />
                            <span :style="'color:'+data.font_color">{{item.poster_name}}</span>
                        </router-link>
                        <router-link to="/enjoy" v-else-if="item.poster_name=='收藏'">
                            <img :src="item.image" />
                            <span :style="'color:'+data.font_color">{{item.poster_name}}</span>
                        </router-link>
                        <a v-else-if="item.poster_name=='充值'" @click="toastTip">
                            <img :src="item.image"/>
                            <span :style="'color:'+data.font_color">{{item.poster_name}}</span>
                        </a>
                        <router-link to="/allGoods" v-else-if="item.poster_name=='全部商品'">
                            <img :src="item.image" />
                            <span :style="'color:'+data.font_color">{{item.poster_name}}</span>
                        </router-link>
                        <router-link to="/getGoodsByCid" v-else-if="item.poster_name=='分类'">
                            <img :src="item.image" />
                            <span :style="'color:'+data.font_color">{{item.poster_name}}</span>
                        </router-link>
                        <router-link to="/myCoupon" v-else-if="item.poster_name=='优惠券'">
                            <img :src="item.image" />
                            <span :style="'color:'+data.font_color">{{item.poster_name}}</span>
                        </router-link>

                        <a v-else @click="toastTip">
                            <img :src="item.image" />
                            <span :style="'color:'+data.font_color">{{item.poster_name}}</span>
                        </a>
                    </div> -->
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
import localStroage from '@/actions/localStorage.js'
export default {
  data () {
    return {
        searchVal:'',
        userInfo: {}
    }
  },
  props:['data'],
  components: {
  },
    watch:{
        data(nVal,oVal){

        }
    },
  methods: {
    toTabbar(url){
        wx.switchTab({
          url:url
        })
    },
    toast(){
        wx.showToast({
          title: '该功能暂未开放，敬请期待',
          icon: 'none',
          duration: 1000,
          mask:true
        })
    },
    towebView(linkUrl){
        let url='../../pages/webView/main'
        localStroage.setStorage('linkUrl',linkUrl)
        wx.navigateTo({ url })
    }
  },

  created () {

  },
  mounted () {

  }

}
</script>

<style scoped lang="scss">
    .main-features {
            width: 92vw;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            border-radius: 8px;
            overflow: hidden;
            ul {
                width: 100%;
                height: 100%;
                display: flex;
                flex-wrap: wrap;
                padding-bottom: 10px;
                li {
                    width: 20%;
                    align-items: center;
                    text-align:center;
                    margin-top: 10px;
                    a {
                        width: 100%;
                        height: 100%;
                        align-items: center;
                        img {
                            width: 15vw;
                            // height: 2.6875rem;
                            height: 15vw;
                            margin: 0 auto;
                        }
                        span {
                            display: block;
                            font-size: 13px;
                        }
                    }
                }
            }
        }
</style>
